<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <span>修改用户信息</span>
      </div>
      <div>
         <el-form label-width="80px">
            <el-form-item label="用户名">
                <el-input placeholder="请输入用户名" v-model="loginUser.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input placeholder="请输入密码" v-model="loginUser.password"></el-input>
            </el-form-item>
            <el-form-item label="电话">
                <el-input placeholder="请输入电话" v-model="loginUser.phone"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input placeholder="请输入邮箱" v-model="loginUser.email"></el-input>
            </el-form-item>
            <el-form-item label="角色">
                <el-select v-model="loginUser.auth">
                    <el-option :value="1" label="超级管理员">超级管理员</el-option>
                    <el-option :value="2" label="普通管理员">普通管理员</el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="头像">
                <el-upload
                    class="avatar-uploader"
                    action="http://www.zhaijizhe.cn:3005/images/uploadImages"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <!-- <img v-if="loginUser.image" :src="loginUser.image" class="avatar"> -->
                     <el-image 
                        v-if="loginUser.image"
                        :src="loginUser.image" 
                        class="avatar">
                    </el-image>
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="modifyUserInfo" class="loginbtn">修改</el-button>
            </el-form-item>

         </el-form>
         
      </div>
    </el-card>
  </div>
</template>

<script>
import {mapState,mapActions} from 'vuex'
export default {

    computed:{
        ...mapState(['loginUser'])
    },
    methods:{
        ...mapActions(['modifyUserAsync']),
        handleAvatarSuccess(args){
           console.log('args',args);
           this.loginUser.image=`http://www.zhaijizhe.cn:3005${args.data[0]}`
           
        },
        beforeAvatarUpload(file){
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        modifyUserInfo(){
            console.log('user',this.loginUser);
            this.modifyUserAsync(this.loginUser)
        }
    }
};
</script>

<style scoped>
  .avatar-uploader ::v-deep .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader ::v-deep .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .loginbtn{
    width: 100px;
  }
</style>